<template>
	<div class="shop_container">
		<ul class="shop-list" v-if="shops.length">
			<li class="clearfix" v-for="item in shops" :key="item.id" @click="$router.push('/shops')">
				<div class="list-left">
					<img class="list-pic" v-lazy="baseImgURL + item.image_path" alt="">
				</div>
				<div class="list-cont">
					<div class="shop_detail_header">
						<div class="brand">品牌</div>
						<h4 class="shop_title ellipsis">{{item.name}}</h4>
						<!-- 支持 保 准 -->
						<ul class="shop_detail_ul" v-for="support, index in item.supports" :key="index">
							<li class="supports">{{support.icon_name}}</li>
						</ul>
					</div>
					<div class="shop_rating_order">
						<div class="situation">
							<Star :score="item.rating" :size="24"></Star>
							<!-- 等级 -->
							<span class="level">{{item.rating}}</span>
							<!-- 月售单量 -->
							<span>月售{{item.recent_order_num}}单</span>
						</div>
						<div class="brand">
							<!-- 配送方 -->
							<span data-type="specialized">{{item.delivery_mode.text}}</span>
							<!-- <span data-type="time">准时达</span> -->
						</div>
					</div>
					<div class="range">
						<p>¥{{item.float_minimum_order_amount}}元起送/配送费¥{{item.float_delivery_fee}}</p>
					</div>
				</div>
			</li>
		</ul>
		
		<ul v-else>
			<li v-for="item in 6">
				<img src="../../assets/images/shop_back.svg" alt="" >
			</li>
		</ul>
	</div>
</template>

<script>
	import Star from '../Star/Star.vue'
	export default {
		data() {
			return {
				// 商家图片基础路径
				baseImgURL: 'http://cangdu.org:8001/img/'
			}
		},
		props: {
			shops: {
				type: Array,
				default: '获取失败'
			}
		},
		components:{
			Star
		}
	}
</script>

<style lang="less" scoped>
	.shop-list{
		>li{
			padding: 10px 10px;
			border-bottom: 1px solid #efefef;
		}
	}
	.list-left{
		float: left;
		width: 23%;
		padding-right: 10px;
		.list-pic{
			width: 100%;
			height: 75px;
			object-fit: cover;
			object-position: top center;
		}
	}
	
	.shop_detail_header{
		.brand{
			display: inline-block;
			background: #F5A100;
			font-size: 12px;
			font-weight: bold;
			padding: 2px;
			color: #333;
			margin-right: 4px;
		}
		.shop_title{
			display: inline-block;
			width: 40%;
			font-size: 18px;
			font-weight: 700;
		}
		.shop_detail_ul{
			float: right;
			.supports{
				display: inline-block;
				color: #999;
				border: 1px solid #999;
				margin-left: 3px;
				font-size: 12px;
				padding: 1px;
			}
		}
	}
	
	.shop_rating_order{
		position: relative;
		margin-top: 10px;
		margin-bottom: 10px;
		.situation{
			font-size: 12px;
			span{
				color: #999;
			}
			.level{
				color: #d3a150;
				margin-right: 5px;
			}
		}
		.brand{
			font-size: 12px;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			span{
				border: 1px solid #009474;
			}
			span:not(:first-child){
				margin-left: 5px;
			}
			span[data-type="specialized"]{
				background: #009474;
				color: #fff;
			}
			span[data-type="time"]{
				color: #009474;
			}
		}
	}
	
	.range{
		float: left;
		font-size: 12px;
		color: #999;
	}
	
</style>
